<template>
  <div class="hu-panel" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
    <div v-if="$slots.header || header" class="hu-panel__header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="hu-panel__body" :style="bodyStyle">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Panel',
  props: {
    header: {},
    bodyStyle: {},
    shadow: {
      type: String
    }
  }
}
</script>

<style lang="scss" scope>
.hu-panel {
  // width:1600px;
  // height:164px;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 10px 0px rgba(4,0,0,0.1);
  border-radius:4px;
  padding: 24px 15px 0 30px;
  .hu-panel__header {
    border-bottom: 1px solid #F2F2F2;
    height: 35px;
    color: #333333;
    font-weight: bold;
    font-size: 16px;
  }
  .hu-panel__body {
    padding-top: 36px;
    padding-bottom: 26px;
  }
}
</style>
